<template>
	<view class='promotionGood'>
		<block v-for="(item,index) in benefit" :key="index">
			<view class='item acea-row row-between-wrapper' @tap="goDetail(item)" hover-class="none">
        <view class='pictrue'>
          <image :src='item.product.image'></image>
        </view>
        <view class='text'>
          <view class='name line1'>{{item.product.store_name}}</view>
          <view class="sp-money acea-row row-between row-middle" >
            <view class='moneyCon'>拼团价: ￥<text class='num'>{{item.product.pink_price}}</text></view>
              <view class='wpz_sm'>未中团即返{{ item.rebate || 0 }}元红包</view>
          </view>
					<view class='initiator'>
            <image class="avatars" :src="item.avatar" />
            <text>{{item.nickname}}</text>
					</view>
					<view class='acea-row row-between-wrapper'>
						<view class='now_num'><text class="tuan_rs">{{ item.product.pink_type }}人团 </text><text>已参团{{item.pink_people}}人</text></view>
						<view class="btn">去参团</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>
<script>
	import {mapGetters} from "vuex";
	import { getPingTuanSetting } from '@/api/api.js'
	export default {
		computed: mapGetters(['uid']),
		props: {
			benefit: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				'pink4_rebate': 0,
				'pink5_rebate': 0,
        'pink6_rebate': 0,
        'pink7_rebate': 0
			};
		},
		methods: {
			goDetail(item){
        uni.navigateTo({
          url: `/pages/goods_details/index?id=${item.cid}&tid=${item.id}`
        })
			},
			get_pingtuan_setting(){
				getPingTuanSetting().then(res => {
					console.log(res);
					let config = res.config
					this.pink4_rebate = config.pink4_rebate
					this.pink5_rebate = config.pink5_rebate
          this.pink6_rebate = config.pink6_rebate
          this.pink7_rebate = config.pink7_rebate
				})
			}
		},
		created() {
      this.get_pingtuan_setting()
		}
	}
</script>

<style scoped lang='scss'>
	.promotionGood {
    margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.promotionGood .item {
		border-bottom: 1rpx solid #eee;
		height: 250rpx;
	}

	.promotionGood .item .pictrue {
		position: relative;
		width: 188rpx;
		height: 188rpx;
	}

	.promotionGood .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.promotionGood .item .text {
		font-size: 24rpx;
		color: #999;
		width: 472rpx;
    padding: 10rpx 0;
	}
  .promotionGood .item .text .avatars {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 20rpx;
  }
	.promotionGood .item .text .name {
		font-size: 30rpx;
		color: #333;
	}

	.promotionGood .item .text .sp-money {
		margin: 20rpx 0 20rpx 0;
	}

	.promotionGood .item .text .sp-money .moneyCon {
		padding: 0 18rpx;
		background-color: red;
		height: 46rpx;
		line-height: 46rpx;
		background-image: linear-gradient(to right, #ff6248 0%, #ff3e1e 100%);
		font-size: 20rpx;
		color: #fff;
		border-radius: 24rpx 3rpx 24rpx 3rpx;
	}

	.promotionGood .item .text .sp-money .moneyCon .num {
		font-size: 24rpx;
	}
	.wpz_sm{
		color: #ff271e;
		line-height: 30rpx;
	}
	.tuan_rs{
    color: #ff9500;
    margin-right: 10rpx;
	}
	.btn{
    background-color: #ff271e;
    border-radius: .29rem;
    color: #fff;
    font-size: 30rpx;
		padding: 10rpx 20rpx;
    font-weight: 700;
    margin-bottom: 10rpx;
	}
</style>
